<template>
	<view class="founder-info">
		
		<view class="thanks">
			
			<view class="service">
				<rich-text :nodes="htmlNodes"></rich-text>
			</view>
			
		</view>
	
	    <backBtn  />
	</view>
</template>

<script>
	
    const regex = /<\/?p>/g; 
	import backBtn from '@/components/backBtn.vue'
	import * as api from '../../utils/api.js'
	export default {
		name: 'orderFeedback',
		components: {backBtn},
		onLoad() {
			this.getHomeInfo();
		},
		data() {
			return {
				userAgreement: [], // 将字符串切成数组
				htmlNodes: []
			}
		},
		methods: {
			async getHomeInfo() {
				let userAgreement = uni.getStorageSync('userAgreement');
				if (!userAgreement) {
					const res = await api.getHomeInfo();
					userAgreement = res.data?.userAgreement || '';
				}
				
				this.userAgreement = userAgreement;
				this.processHtml();
			},
			processHtml() {
			    // 检查 this.userAgreement 是否存在
			    if (!this.userAgreement) {
			        this.htmlNodes = [];
			        return;
			    }
			
			    // 定义段落样式常量
			    const paragraphStyle = 'color: white; font-size: 20rpx; margin: 16rpx 0; text-indent: 2em;';
			
			    // 正则匹配所有 <p> 标签内的内容，支持 <p> 标签包含属性
			    const regex = /<p[^>]*>(.*?)<\/p>/g;
			    const matches = [];
			    let match;
			
			    // 循环查找匹配项
			    while ((match = regex.exec(this.userAgreement))!== null) {
			        matches.push(match[1]);
			    }
			
			    // 将匹配到的内容转换为 nodes 格式
			    this.htmlNodes = matches.map(text => {
			        const children = [];
			        let index = 0;
			
			        // 匹配 <strong> 标签的正则表达式
			        const strongRegex = /<strong>(.*?)<\/strong>/g;
			        let strongMatch;
			        while ((strongMatch = strongRegex.exec(text))!== null) {
			            // 添加 <strong> 标签之前的普通文本
			            if (strongMatch.index > index) {
			                children.push({
			                    type: 'text',
			                    text: text.slice(index, strongMatch.index)
			                });
			            }
			
			            // 添加 <strong> 标签内容
			            children.push({
			                name: 'strong',
			                attrs: {
			                    style: 'font-weight: bold;' // 可以根据需要调整样式
			                },
			                children: [
			                    {
			                        type: 'text',
			                        text: strongMatch[1]
			                    }
			                ]
			            });
			
			            index = strongMatch.index + strongMatch[0].length;
			        }
			
			        // 添加最后一段普通文本
			        if (index < text.length) {
			            children.push({
			                type: 'text',
			                text: text.slice(index)
			            });
			        }
			
			        return {
			            name: 'p',
			            attrs: {
			                style: paragraphStyle
			            },
			            children
			        };
			    });
			}
			    
		},
		
	}
</script>

<style lang="scss">
	.founder-info {
		color: white;
		width: 100%;
		height: 100vh;
		overflow: scroll;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		.thanks {

			   .service {
				 font-size: 40rpx;
				 padding:60rpx 20rpx;
				 padding-bottom: 160rpx;
				   .paragraph {
				   	 text-indent: 2em;
				   }
			   }

		}
		
		.back-btn {
			border-radius: 0;
			background: rgba(0, 0, 0, 0.9);
		}
	}
</style>
